<template>
    <div class="container">
        <div class="show"></div>
    </div>
</template>

<script>
  window._interceptConfig = {
    collection: true, //整体开关
    click: true, //页面点击事件信息采集开关
    page: true, //页面跳转加载事件信息采集开关
    error: true, //异常信息采集开关
    http: true, //通讯信息采集开关
    name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
    url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
  };
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
export default {
    name: "Index",
    data() {
        return{
            x:[],
            y:[],
        }
    },
    methods:{
        initData(){
            this.x = ['x','y','z']
            this.y = [100,200,300]
        },
        initCharts(){
            const myChart2 = this.$echarts.init(document.querySelector('.show'))
            const option2 = {
                /* 横轴 */
                xAxis: {
                    /* 横轴为类别 */
                    type: 'category',
                    data: this.x
                },
                yAxis: {
                    /* 纵轴为数据 */
                    type: 'value'
                },
                tooltip:{
                    /*
                        如何触发提示框 item:图形触发 axis:坐标轴触发 none:不触发
                    */
                    trigger:'axis',
                    /*
                        坐标轴指示器
                            type:属性
                                line shadow cross none
                    */
                    axisPointer:{
                        type:'line',
                    }
                },
                /* 数据系列 */
                series: [{
                    /* data值长度必须对应x轴长度 */
                    data: this.y,
                    /* 折线图 */
                    type: 'line',
                }]
            }

            myChart2.setOption(option2)
        }
    },
    mounted() {
        this.initData()
        this.initCharts()
    }
};
</script>
<style scoped lang="scss">
    .show {
        height: 300px;
        width: 400px;
    }
</style>

